<template>
  <div class="wrapper">
    <div class="bckimg">
      <img
        src="https://cdn-usa.skypixel.com/uploads/usa_files/default_images/default_personal_cover/508c62ce-a382-49a9-b395-fadeeaa91c59.jpg@!1920"
        alt="" />
    </div>
    <div class="box-card" v-if="userInfo">
      <div class="userinfoBox">
        <div class="imgBox">
          <img :src="userInfo.headpic" />
        </div>
        <div class="username">
          <h2>{{ userInfo.username }}</h2>
        </div>
      </div>
      <h2>全部作品</h2>
      <div class="opusBox">
        <!-- 作品显示 -->
        <div class="contentpic" v-if="userOpusData">
          <div class="onebox" v-for="(item, index) in userOpusData" :key="index">
            <!-- 图片 -->
            <div class="imgBox2 mouseIn">
              <img :src="item.img" @click="toDetail('natural', item.id)" class="imgStyle" alt="" />
            </div>
            <!--图片下的文字 -->
            <div class="imgBtnBox">
              <!-- 图片描述 -->
              <div class="textBox mouseIn" @click="toDetail('natural', item.id)">
                {{ item.text }}
              </div>
              <!-- 设备 -->
              <div class="dispalyStyle equipmentBox">
                <div class="equipmentTxt">设备：</div>
                <div class="equipmentName">{{ item.phone }}</div>
              </div>
              <!-- 点赞和查看记录 -->
              <div class="dispalyStyle">
                <div class="lookPersonBox dispalyStyle">
                  <div class="lookIconBox">
                    <svg t="1651737036374" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="3011" width="18" height="19">
                      <path
                        d="M512 209.403241c-201.731514 0-374.009206 125.476783-443.808922 302.596759 69.798692 177.119977 242.077408 302.596759 443.808922 302.596759 201.933105 0 374.010229-125.476783 443.808922-302.596759C886.009206 334.880023 713.933105 209.403241 512 209.403241zM512 713.731514c-111.355157 0-201.731514-90.375334-201.731514-201.731514s90.375334-201.731514 201.731514-201.731514 201.731514 90.375334 201.731514 201.731514S623.355157 713.731514 512 713.731514zM512 390.961296c-66.772776 0-121.038704 54.265928-121.038704 121.038704s54.265928 121.038704 121.038704 121.038704 121.038704-54.265928 121.038704-121.038704S578.772776 390.961296 512 390.961296z"
                        p-id="3012" fill="#707070"></path>
                    </svg>
                  </div>
                  <div>{{ item.browse }}</div>
                </div>
                <div class="supportBox dispalyStyle">
                  <div class="supportIconBox" v-if="!item.support"
                    @click="agreeFun(item.id, item.agree,'getNaturalData')">
                    <svg t="1651736823648" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="2639" width="18" height="18">
                      <path
                        d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                        fill="#707070" p-id="2640"></path>
                    </svg>
                  </div>
                  <!-- 取消点赞 -->
                  <div v-else class="supportIconBox"
                    @click="noAgreeFun(item.id, item.agree,'getNaturalData')">
                    <svg t="1651905212123" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="3207" width="18" height="18">
                      <path
                        d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                        fill="#87b9fe" p-id="3208"></path>
                    </svg>
                  </div>
                  <div class="">{{ item.agree }}</div>
                </div>
              </div>
              <!-- 拍摄者名称 和时间 -->
              <div class="dispalyStyle dispalyJ">
                <div class="pusher dispalyStyle">
                  <el-avatar class="avatar" size="small" :src="item.userimg"></el-avatar>
                  <div class="userName">{{ item.username }}</div>
                </div>
                <div class="pushTime">{{ getDateYYMMDD(item.time) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btnBox">
        <el-button class="btnTxt" type="danger" @click='pushOpusFun'>发布作品</el-button>

      </div>
      <PushDialog :dialogVisible='dialogVisible' @updata='getUserOpusData'
        @close='closePushDialog' />
    </div>
  </div>
</template>

<script>
import PushDialog from './components/pushDialog.vue'
export default {
  components: {
    PushDialog,
  },
  props: {},
  data() {
    return {
      userInfo: null,
      dialogImageUrl: "",
      dialogVisible: false,
      userOpusData: null,
    };
  },
  mounted() {
    this.getUserInfo();
    this.routerPath = window.location.pathname; //默认
  },
  watch: {},
  computed: {},
  methods: {
    getUserInfo() {
      let is_login = localStorage.getItem("islogin");
      let params = {
        email: is_login,
      };
      this.$axios.post("/api/getUserInfo", params).then((res) => {
        let { data } = res;
        this.userInfo = data[0];
        this.getUserOpusData();
        this.$store.commit("SET_USERINFO", this.userInfo);
      });
    },
    getUserOpusData() {
      let params = {
        userid: this.userInfo.id,
      };
      console.log(params);
      this.$axios.post('/api/opusData', params).then((res) => {
        let { data } = res;
        this.isAgreeFun(data, 'userOpusData')
      })
    },
    closePushDialog() {
      this.dialogVisible = false;
    },
    pushOpusFun() {
      this.dialogVisible = true;
    },
    // 如果当前登录的用户点赞了 就显示取消的带点赞icon
    async isAgreeFun(currentData, name) {
      let res = await this.$axios('/api/supportData')
      let { data } = res;
      let userId = this.userInfo.id;
      let newData = [...currentData]
      if (data.length > 0) {
        newData.forEach((el, index) => {
          for (let i = 0; i < data.length; i++) {
            if (userId == data[i].user_id && data[i].selected_id == el.id && Number(el.agree) > 0) {
              el['support'] = true;
            } else {
              el['support'] = false;
            }
          }
        });
      } else {
        arr = [...newData]
      }
      this[name] = newData;
    },
    // 点赞
    agreeFun(id, agree, funName) {
      let params = {
        id,
        agree: Number(agree) + 1,
        user_id: this.userInfo.id,
        noAgree: false,
      };
      this.$axios.post("/api/myAgree", params).then((res) => {
        let { status } = res;
        if (status == 200) {
          // this.init();
          this.getUserOpusData();
        }
      });
    },
    // 取消点赞
    noAgreeFun(id, agree, funName) {
      let params = {
        id,
        agree: Number(agree) > 0 ? Number(agree) - 1 : Number(agree),
        user_id: this.userInfo.id,
        noAgree: true,
      };
      this.$axios.post("/api/myAgree", params).then((res) => {
        let { status } = res;
        if (status == 200) {
          // this.init();
          this.getUserOpusData();
        }
      });
    },
  },
  created() { },
};
</script>
<style lang="scss" scoped>
.wrapper {
  background-color: #cccccc1c;
  position: relative;
  .bckimg {
    width: 100%;
    height: 500px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .userinfoBox {
    display: flex;
    box-sizing: border-box;
    margin-top: 10px;
  }
  .username {
    line-height: 107px;
    box-sizing: border-box;
    margin-left: 10px;
  }
  .box-card {
    // height: 500px;
    width: 1200px;
    margin: 0 auto;
    .imgBox {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    h2 {
      margin-bottom: 30px;
      text-align: left;
    }
    .btnTxt {
      text-align: left;
      margin: 20px 0;
    }
    .btnBox {
      text-align: center;
    }
  }
}
.opusBox {
  width: 1220px;
  // height: 364px;
  margin: 0 auto;
  .toptitle {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .contentpic {
    width: 100%;
    display: flex;
  }
  .onebox {
    margin-right: 30px;
    width: 280px;
    background-color: #fff;
    border-radius: 3px;
  }
  .textBox {
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    width: 250px;
    font-size: 16px;
    font-weight: bold;
  }
  .imgBox2 {
    width: 280px;
    height: 190px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    overflow: hidden;
  }
  .imgBtnBox {
    width: 280px;
    height: 130px;
    padding: 10px 5px;
    box-sizing: border-box;
  }
  .dispalyStyle {
    display: flex;
  }
  .imgStyle {
    width: 280px;
    height: 190px;
  }
  .equipmentBox {
    font-size: 14px;
    color: #999;
  }
  .equipmentBox {
    padding: 5px 0;
  }
  .lookPersonBox {
    margin-right: 30px;
  }
  .supportBox,
  .lookPersonBox {
    color: #999;
    font-size: 14px;
  }
  .avatar {
    margin-right: 10px;
  }
  .userName {
    text-align: left;
    width: 120px;
    line-height: 30px;
    height: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
  .dispalyJ {
    height: 40px;
    justify-content: space-between;
    border-top: 1px solid rgb(196, 196, 196);
    padding-top: 8px;
    font-size: 15px;
  }
  .pushTime {
    line-height: 30px;
    color: #999;
    font-size: 13px;
  }
  .hotStyle {
  }
  .hotItemBox {
    margin-right: 26px;
    background-color: #fff;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  .hotimg {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    width: 180px;
    height: 122px;
  }
  .hotTxt {
    color: #333;
    font-size: 13px;
    padding: 10px 0;
  }
  .mouseIn:hover {
    cursor: pointer;
    color: #1088f2;
  }
  .supportIconBox:hover {
    cursor: pointer;
  }
}
</style>